<template>
  <el-table
    :data="orderlist"
    style="width: 100%">
    <el-table-column
      label="下单时间"
      width="150">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.time }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="陪玩ID"
      width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.pid }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="数量/小时"
      width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.num }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="订单总价/元"
      width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.price }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="支付状态"
      width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.state }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="订单状态"
      width="150">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.o }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template slot-scope="scope">
        <el-button
          v-show="show2(scope.row.state,scope.row.o)"
          size="mini"
          type="primary"
          style="margin-left: 0px"
          @click="goPay(scope.row)">去支付</el-button>
        <el-button
          v-show="show(scope.row.o)"
          size="mini"
          type="danger"
          style="margin-left: 0px"
          @click="handleDelete(scope.row.id)">结束订单</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  import axios from 'axios'
  import cookie from "vue-cookie";
  export default {
    data() {
      return {
        orderlist:[],
        user:{},
        id:'',
        search: '',
        order:{
          uid:'',
          pid:'',
          num:'',
          price:'',
        },
        payVo:{
          price:'',
          gname:'',
          id:''
        }
      }
    },
    created() {
      this.getUser();
    },
    methods: {
      show:function(o){
        if(o=='已完成'){
          return false;
        }else {
          return true;
        }
      }, show2:function(state,o){
        if(state=='支付完成'){
          return false;
        }else if(o=='已完成'){
          return false;
        }
        else {
          return true;
        }
      },
      goPay:function (order) {
              this.payVo.price=order.price;
              this.payVo.gname="陪玩服务";
              this.payVo.id=order.id;
              axios.post("api/pay",this.payVo).then((res) =>{//返回成功调用此方法
                document.querySelector('body').innerHTML = res.data;//查找到当前页面的body，将后台返回的form替换掉他的内容
                document.forms[0].submit();  //执行submit表单提交，让页面重定向，跳转到支付宝页面
              })
                .catch((err)=>{
                  console.log(err)
                })
            },
      getUser:function () {
        var user=sessionStorage.getItem("user");
        axios.post("api/user/getUser",{name:user}).then(res=>{
          if (res.data.code==200){
            this.user=res.data.data;
            this.id=this.user.id;
            axios.post("api/order/userall",{uid:this.id}).then(res=>{
              if (res.data.code==200){
                console.log(res.data.data)
                this.orderlist=res.data.data;
              }
            })
          }
        })
      },
      handleDelete(oid) {
        axios.post("api/play/upo",{id:oid}).then(res=>{
          if (res.data.code==200){
            location.reload();
            alert("订单已结束")
          }else{
            alert("无法结束 请重试")
          }
        })
      }
    },
  }
</script>

<style scoped>

</style>
